<template>
  <div class="bottomCheck">
    <div class="price">
      实付金额<span>&yen;{{ result.totalPrice }}</span>
    </div>
    <div
      v-if="showBtn"
      class="btn"
      @click="
        () => {
          handleSubmit(true);
        }
      "
    >
      提交订单
    </div>
  </div>
  <div
    class="mask"
    v-if="showMask"
    @click="
      () => {
        handleSubmit(false);
      }
    "
  >
    <div class="toast" @click.stop>
      <div class="toast__title">确认要离开收银台？</div>
      <div class="toast__msg">请尽快完成支付，否则将被取消</div>
      <div class="toast__btns">
        <div
          @click="
            () => {
              handleConfirm(false);
            }
          "
          class="toast__btn toast__btn--first"
        >
          取消订单
        </div>
        <div
          @click="
            () => {
              handleConfirm(true);
            }
          "
          class="toast__btn toast__btn--second"
        >
          确认订单
        </div>
      </div>
    </div>
  </div>
  <Toast v-if="toastData.isShow" :msg="toastData.msg" />
</template>

<script>
import { useRoute, useRouter } from "vue-router";
import { useStore } from "vuex";
import { post } from "@/API/axios";
import { useCommonCartEffect } from "@/effects/cartEffect.js";
import Toast, { toastEffect } from "@/components/Toast";
import { ref } from "vue";
//蒙版相关
const useMaskEffect = () => {
  let showMask = ref(false);
  const handleSubmit = (state) => {
    showMask.value = state;
  };
  return { showMask, handleSubmit };
};

export default {
  name: "orderBottom",
  components: { Toast },
  setup() {
    //基础数据
    const store = useStore();
    const route = useRoute();
    const router = useRouter();
    const shopId = route.params.id;
    const addressId = route.query.addId;

    //是否能结算
    let showBtn = addressId ? true : false;

    //mask 相关
    const { showMask, handleSubmit } = useMaskEffect();

    //Toast相关
    const { toastData, showToast } = toastEffect();
    //store购物车数据相关
    const { result, shopName, cartList, dataList } =
      useCommonCartEffect(shopId);

    //提交数据相关

    let products = [];
    for (let key in dataList.value) {
      const item = dataList.value[key];
      if (item.count > 0) {
        products.push({ id: item._id, num: item.count });
      }
    }
    //Toast按钮逻辑
    const handleConfirm = async (isCancel) => {
      try {
        const res = await post("/api/order", {
          addressId,
          shopId: parseInt(shopId),
          shopName: shopName.value,
          isCancel,
          products,
        });
        if (res.errno === 0) {
          showToast("成功");
          router.push({ name: "home" });
          store.commit("clearCartList", shopId);
        } else {
          showToast("注册失败");
        }
      } catch (error) {
        showToast(String(error));
        setTimeout(() => {
          router.push({ name: "home" });
        }, 500);
      }
    };

    return {
      result,
      handleConfirm,
      toastData,
      showToast,
      handleSubmit,
      showMask,
      showBtn,
    };
  },
};
</script>

<style lang="scss" scoped>
@import "@/styles/variables.scss";
.bottomCheck {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 0.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 0.16rem;
  background-color: #fff;
  .price {
    font-size: 0.14rem;
    color: $content-color;
  }
  .btn {
    height: 0.5rem;
    width: 1rem;
    line-height: 0.5rem;
    text-align: center;
    background-color: $btn-color;
    font-size: 0.14rem;
    color: #fff;
  }
}

.mask {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);
  .toast {
    width: 3.1rem;
    height: 1.6rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    background-color: $white-color;
    border-radius: 0.04rem;
    padding: 0.24rem;
    &__title {
      line-height: 0.36rem;
      font-size: 0.18rem;
      color: $content-color;
      text-align: center;
    }
    &__msg {
      line-height: 0.28rem;
      text-align: center;
      font-size: 0.14rem;
      color: $medium-font-color;
    }
    &__btns {
      display: flex;
      justify-content: space-evenly;
      align-items: center;

      .toast__btn {
        width: 0.8rem;
        height: 0.32rem;
        line-height: 0.28rem;
        text-align: center;

        border-radius: 0.16rem;
        margin-top: 0.24rem;
        &--first {
          color: $btn-color;
          border: 1px solid $btn-color;
        }
        &--second {
          background-color: $btn-color;
          color: $white-color;
        }
      }
    }
  }
}
</style>
